<!-- 
专题页面
 * @Author: zuobufan
 * @Location: 安庆石化信息中心
 * @LastEditors: zuobufan
 * @CreateEditTime: 2021-09-17 9:24:00
 -->
<template>
   <div class="topic">
      <div class="topic-box" v-for="item in topicData" :key="item.id" >
          <img :src="item.scene_pic_url" alt="" width="100%">
          <h3>{{item.title}}</h3>
          <h4>{{item.subtitle}}</h4>
          <p>{{item.price_info | RMBformat}}</p>
      </div>
      <van-pagination v-model="page" :page-count="2" mode="simple" @change="changePage" />
        <BackToTop/>
   </div>
</template>

<script>
import {GetTopicListData} from '@/request/api'
import BackToTop from '@/components/BackToTop'
   export default {
       components:{
           BackToTop
       },
       data() {
           return {
               page:1,
               size:10,
               currentPage:1,
               topicData:[], //专题页面数据
           };
       },
       created() {
           this.topicList()
       },
       methods: {

           changePage(){
               this.topicList();
               window.scroll(0,0);
           },

           topicList(){
                GetTopicListData({
                page:this.page,
                size:this.size
            }).then(res =>{
                console.log(res);
                if(res.errno == 0){
                    this.topicData = res.data.data;
                }
                
            })
           }
       },
   }
</script>
<style lang="less" scoped>
*{
    font-size: .14rem;
}

.topic{
    padding-bottom: 50px;
    text-align: center;
    .topic-box{
        background-color: #fff;
        margin-bottom: 20px;
        padding-bottom: 10px;
        h3{
            margin: 10px 0;
            font-size: .18rem;
        }
        h4{
            font-size: .16rem;
            margin: 20px 0;
        }
        p{
            color: #8b0000;
            margin-bottom: 10px;
        }
    }
}
</style>